<template>
    <div>
        <i id="music" @click="toggleMuted" :class="{muted}"></i>
        <audio src="../assets/bgm.mp3"></audio>
    </div>
</template>

<script>

export default {
    name: 'Logo',
    data (){
        return {
            muted: !1,
        }
    },
    watch: {
        muted(t){
            for (var k in audio) { // 遍历所有音频，控制静音
                if (audio.hasOwnProperty(k)) {
                    audio[k].muted = t;
                }
            }
        },
    },
    methods: {
        toggleMuted(){
            this.muted = !this.muted;
        },
    },
    mounted () {

    }
}
</script>

<style lang="scss">
    #music {
        position: absolute;
        right: 0;
        top: 10px;
        width: 80px;
        height: 80px;
        z-index: 90;
        // transform: scale(.9);
        &::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -27px 0 0 -27px;
            width: 53px;
            height: 53px;
            background: url(../assets/music.png) bottom no-repeat;
            animation: rotate 5s infinite linear;
        }
        &.muted::after {
            background-position: top;
            animation-play-state: paused;
        }
    }
    audio {
        display: none;
    }
    @keyframes rotate {
        to {
            transform: rotate(360deg);
        }
    }
</style>
